import { useState, useEffect, useRef } from "react";
import Header from "./components/Header";
import Sidebar from "./components/Sidebar";
import ChatArea from "./components/ChatArea";
import Login from "./components/Login"; // 导入登录组件
import type { ChatMessage } from "./types/chat";
import { getAiModel } from "./services/chat/geiAiModel";
import type { AiModelResponse } from "./services/chat/geiAiModel";
import type { InputAreaRef } from "./components/InputArea";
import type { CreateSessionRequestResponseType } from "./services/chat/createSession";
import { getSessionHistoryList } from "./services/chat/getSessionHistoryList";
import { getSessionDetails } from "./services/chat/getSessionDetails";
import { deleteSession } from "./services/chat/deleteSession";
import { updateSessionName } from "./services/chat/updateSessionName";
import { AIModelTagsConstant, hasFeature } from "./enum/index";
import alertService from "./utils/alertService";
import userService from "./utils/userService";
import { requestEvents } from "./services/request";
import queuedApi from "./services/queuedApi";
import TokenManager from "./utils/TokenManager";
import requestQueue from "./utils/requestQueue";
import type { SendFileMessageRequestType } from "./services/chat/sendFileMessage";
import { sendFileMessage } from "./services/chat/sendFileMessage";
import { useQueuedMessage } from "./hooks/useQueuedMessage";
import type { UploadFile } from "./types/upload";
import { useChatMessage } from "./hooks/useChatMessage";
import { ImageUpload } from "./services/files";
import type { ImageUploadResponse } from "./services/files";
import { generateCustomImageMarkdown } from "./services/files";
import ContextMenu, { useContextMenu } from "./components/ui/ContextMenu";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import ImageIcon from "@mui/icons-material/Image";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

// 定义ClipboardContent接口，描述粘贴操作的返回内容
interface ClipboardContent {
  type: "text" | "image" | "error";
  data?: string;
  blob?: Blob;
  error?: unknown;
}

// 默认模型，用于在API加载之前显示
const DEFAULT_MODEL: AiModelResponse = {
  accessCode: "lke-deepseek-r1",
  modelName: "lke-deepseek-r1",
  modeType: "快速响应的通用模型",
  enabled: true,
  tags: AIModelTagsConstant.TEXT_CONVERSATION, // 使用数字标签而不是数组
};

function App() {
  const [aiModels, setAiModels] = useState<AiModelResponse[]>([DEFAULT_MODEL]);
  // 侧边栏会话记录 - 只保留服务器会话列表
  const [sessionHistoryItem, setSessionHistoryItem] = useState<
    CreateSessionRequestResponseType[]
  >([]);
  // 当前选中的聊天ID
  const [activeChatId, setActiveChatId] = useState<string | null>(null);
  // 当前聊天的消息
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  // 移动端侧边栏状态
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
  // PC端侧边栏折叠状态
  const [isPcSidebarCollapsed, setIsPcSidebarCollapsed] =
    useState<boolean>(false);
  // 创建对InputArea的引用
  const inputAreaRef = useRef<InputAreaRef | null>(null);
  // 登录模态框状态
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  // 是否处于新聊天模式（未发送任何消息的临时会话）
  const [isNewChat, setIsNewChat] = useState<boolean>(false);

  // 使用消息队列hook
  const {
    sendMessage: queuedSendMessage,
    isLoading: queuedIsLoading,
    isStreaming: queuedIsStreaming,
  } = useQueuedMessage();

  // 从useChatMessage获取setLoadingState函数
  const { setLoadingState } = useChatMessage();

  // 添加一个状态来跟踪消息是否正在发送中
  const [isSending, setIsSending] = useState<boolean>(false);

  // 使用全局右键菜单
  const {
    open: contextMenuOpen,
    positionX,
    positionY,
    selectedText,
    selectedImage,
    closeContextMenu,
    copyText,
    pasteText,
  } = useContextMenu({
    global: true, // 启用全局右键菜单
    onTextSelected: (text) => {
      // 这里可以处理选中文本时的额外逻辑
      console.log("选中的文本:", text);
      return false; // 返回false继续执行默认复制逻辑
    },
  });

  // 添加状态跟踪剪贴板是否有内容
  const [hasClipboardContent, setHasClipboardContent] = useState(false);

  // 检查剪贴板状态
  const checkClipboardContent = () => {
    // 首先检查全局标记
    if (window._hasClipboardContent === true) {
      setHasClipboardContent(true);
      return;
    }

    // 然后检查内部图片剪贴板
    if (window.contextMenuImageClipboard) {
      setHasClipboardContent(true);
      return;
    }

    // 在右键菜单打开时检查剪贴板
    if ("clipboard" in navigator) {
      // 尝试读取剪贴板中的文本
      navigator.clipboard
        .readText()
        .then((text) => {
          if (text) {
            setHasClipboardContent(true);
            return;
          }

          // 如果没有文本，尝试读取剪贴板中的图片
          // 注意：这部分API受到浏览器限制，可能无法在所有浏览器中工作
          if (navigator.clipboard.read) {
            navigator.clipboard
              .read()
              .then((items) => {
                // 检查是否有图片类型
                for (const item of items) {
                  if (item.types.some((type) => type.startsWith("image/"))) {
                    setHasClipboardContent(true);
                    return;
                  }
                }
                setHasClipboardContent(false);
              })
              .catch(() => {
                // 如果无法访问剪贴板内容，假设有内容
                setHasClipboardContent(true);
              });
          } else {
            // 如果不支持read API，假设有内容
            setHasClipboardContent(true);
          }
        })
        .catch(() => {
          // 无法访问剪贴板，假设有内容
          setHasClipboardContent(true);
        });
    } else {
      // 如果不支持剪贴板API，假设有内容
      setHasClipboardContent(true);
    }
  };

  // 扩展useContextMenu钩子，在菜单打开时检查剪贴板
  useEffect(() => {
    if (contextMenuOpen) {
      checkClipboardContent();
    }
  }, [contextMenuOpen]);

  // 设置输入框文本的辅助函数，供提示词组件使用
  const setInputText = (text: string) => {
    if (inputAreaRef.current) {
      inputAreaRef.current.setInputText(text);
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 检查是否已经登录（有缓存的token）
        const hasToken = !!TokenManager.getToken();

        if (hasToken) {
          // 已登录状态，直接使用services中的API函数

          // 使用Promise.all并行获取数据
          const [aiModelsResponse, sessionHistoryResponse] = await Promise.all([
            getAiModel(),
            getSessionHistoryList(),
          ]);

          // 处理AI模型数据
          if (
            aiModelsResponse.code === 200 &&
            Array.isArray(aiModelsResponse.data) &&
            aiModelsResponse.data.length > 0
          ) {
            const enabledModels = aiModelsResponse.data.filter(
              (model: AiModelResponse) => model.enabled
            );
            if (enabledModels.length > 0) {
              setAiModels(enabledModels);
            }
          }

          // 处理会话历史数据
          if (sessionHistoryResponse.code === 200) {
            setSessionHistoryItem(sessionHistoryResponse.data.records);
          } else {
            console.error("获取会话历史失败:", sessionHistoryResponse.message);
          }
        } else {
          // 使用队列化API获取AI模型数据
          const aiModelPromise = queuedApi.get<AiModelResponse[]>(
            "/ai/model/list",
            undefined,
            3 // 更高的优先级，确保AI模型先加载
          );

          // 获取会话历史 - 需要登录的API，使用队列化API
          const sessionHistoryPromise = queuedApi.get<{
            records: CreateSessionRequestResponseType[];
            total: number;
            pages: number;
            current: number;
            size: number;
          }>(
            "/ai/chat/session/list",
            {
              params: {
                pageSize: 50,
                pageNum: 1,
              },
            },
            5
          ); // 较高优先级

          // 通过queuedApi请求AI模型，会在用户登录后自动执行
          aiModelPromise.then((aiModelsResponse) => {
            // 处理AI模型数据
            if (
              aiModelsResponse.code === 200 &&
              Array.isArray(aiModelsResponse.data) &&
              aiModelsResponse.data.length > 0
            ) {
              const enabledModels = aiModelsResponse.data.filter(
                (model: AiModelResponse) => model.enabled
              );
              if (enabledModels.length > 0) {
                setAiModels(enabledModels);
              }
            }
          });

          // 通过queuedApi请求会话历史，会在用户登录后自动执行
          sessionHistoryPromise
            .then((sessionHistoryResponse) => {
              if (sessionHistoryResponse.code === 200) {
                setSessionHistoryItem(sessionHistoryResponse.data.records);
              } else {
                console.error(
                  "获取会话历史失败:",
                  sessionHistoryResponse.message
                );
              }
            })
            .catch((error) => {
              console.error("获取会话历史错误:", error);
            });
        }
      } catch (error) {
        // 统一错误处理
        console.error("数据获取错误:", error);
      }
    };
    fetchData();
  }, []);
  // 当前选择的模型
  const [selectedModel, setSelectedModel] =
    useState<AiModelResponse>(DEFAULT_MODEL);
  //模型切换
  useEffect(() => {
    if (aiModels.length > 0 && aiModels[0] !== DEFAULT_MODEL) {
      setSelectedModel(aiModels[0]);
    }
  }, [aiModels]);

  // 选择侧边栏中的历史聊天记录item
  const handleSelectChat = (id: string) => {
    // 如果选择了一个会话，不再是新聊天模式
    setIsNewChat(false);
    // 如果选择的是当前活动会话，不需要重新加载
    if (id === activeChatId) {
      return;
    }

    setActiveChatId(id);

    // 获取会话详情
    const apiChat = sessionHistoryItem.find((chat) => chat.id === id);
    if (apiChat) {
      // 使用setLoadingState显示加载状态
      setLoadingState(true, false);

      // 获取会话详情
      getSessionDetails(apiChat.id)
        .then((res) => {
          if (res.code === 200 && res.data.length > 0) {
            setMessages(res.data);
          } else {
            // 如果获取失败，显示一条系统消息
            setMessages([
              {
                role: 2,
                content: "无法加载此会话的消息历史记录。",
              },
            ]);
          }
        })
        .catch((error) => {
          console.error("获取会话详情失败:", error);
          setMessages([
            {
              role: 2,
              content: "获取会话详情时出错，请稍后再试。",
            },
          ]);
        })
        .finally(() => {
          setLoadingState(false, false);
        });
    }
  };
  // 处理模型变更
  const handleModelChange = (model: AiModelResponse) => {
    setSelectedModel(model);
  };
  // 重命名聊天
  const handleRenameChat = async (chatId: string, newTitle: string) => {
    try {
      const res = await updateSessionName(chatId, newTitle);
      if (res.code === 200) {
        // 更新sessionHistoryItem中的会话名称
        setSessionHistoryItem((prev) =>
          prev.map((chat) => {
            if (chat.id === chatId) {
              return {
                ...chat,
                sessionName: res.data.sessionName || newTitle,
              };
            }
            return chat;
          })
        );
        // 显示成功提示
        alertService.success(
          `会话${res.data.sessionName || newTitle}重命名成功`
        );
      } else {
        console.error("重命名会话失败:", res.message);
        // 显示错误提示
        alertService.error(`重命名会话失败: ${res.message || "未知错误"}`);
      }
    } catch (error) {
      // 显示错误提示
      alertService.error(
        `重命名会话失败: ${error instanceof Error ? error.message : "网络错误"}`
      );
    }
  };
  // 删除聊天
  const handleDeleteChat = async (chatId: string) => {
    // 获取会话标题，用于显示在提示中
    const chatTitle = getChatTitle(chatId);

    try {
      const res = await deleteSession(chatId);
      if (res.code === 200) {
        setSessionHistoryItem((prev) =>
          prev.filter((chat) => chat.id !== chatId)
        );
        // 显示成功提示
        alertService.success(`会话${chatTitle}已删除`);
      } else {
        // 显示错误提示
        alertService.error(`删除会话失败: ${res.message || "未知错误"}`);
        console.error("删除会话失败:", res.message);
        return; // 删除失败，不执行后续操作
      }
    } catch (error) {
      // 显示错误提示
      alertService.error(
        `删除会话失败: ${error instanceof Error ? error.message : "网络错误"}`
      );
      console.error("删除会话API调用失败:", error);
      return; // 删除失败，不执行后续操作
    }

    // 如果删除的是当前活动聊天，清空消息并重置活动聊天
    if (chatId === activeChatId) {
      setMessages([]);
      setActiveChatId(null);

      // 检查是否还有其他会话可以选择
      const remainingApiChats = sessionHistoryItem.filter(
        (chat) => chat.id !== chatId
      );

      if (remainingApiChats.length > 0) {
        // 如果还有API会话，选择第一个
        handleSelectChat(remainingApiChats[0].id);
      } else {
        // 如果没有任何会话，进入新聊天模式
        handleNewChat();
      }
    }
  };

  // 获取会话标题的辅助函数
  const getChatTitle = (chatId: string): string => {
    // 查找API会话
    const apiChat = sessionHistoryItem.find((chat) => chat.id === chatId);
    if (apiChat) return apiChat.sessionName || "未命名会话";

    return "新对话";
  };
  // 切换侧边栏显示
  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };
  // 关闭侧边栏
  const closeSidebar = () => {
    setIsSidebarOpen(false);
  };

  // 处理PC端侧边栏折叠状态变化
  const handlePcSidebarToggle = (collapsed: boolean) => {
    setIsPcSidebarCollapsed(collapsed);
    // 可以在这里添加任何额外的处理逻辑
    console.log("侧边栏折叠状态:", collapsed ? "已折叠" : "已展开");

    // 可选：向localStorage保存侧边栏状态
    try {
      localStorage.setItem("app_sidebar_collapsed", collapsed.toString());
    } catch (error) {
      console.error("无法保存侧边栏状态到localStorage", error);
    }
  };

  // 在组件挂载时读取侧边栏状态
  useEffect(() => {
    try {
      const savedState = localStorage.getItem("app_sidebar_collapsed");
      if (savedState === "true") {
        setIsPcSidebarCollapsed(true);
      }
    } catch (error) {
      console.error("无法从localStorage读取侧边栏状态", error);
    }
  }, []);

  // 修改handleSendMessage函数
  const handleSendMessage = async (
    message: string,
    files?: UploadFile[],
    options?: { isWebSearch?: boolean }
  ) => {
    // 如果没有消息内容且没有上传文件，或者处于加载状态，则不执行操作
    if ((!message.trim() && (!files || files.length === 0)) || queuedIsLoading)
      return;

    console.log(
      "开始处理发送消息，当前activeChatId:",
      activeChatId,
      "isNewChat:",
      isNewChat,
      "isSending:",
      isSending,
      "options:",
      options
    );

    // 记录网络搜索选项
    if (options?.isWebSearch) {
      console.log("启用了网络搜索功能");
    }

    // 设置消息发送中状态
    setIsSending(true);

    // 如果有文件，使用原有的文件上传处理逻辑
    if (files && files.length > 0) {
      try {
        await handleFileMessageSend(message, files, options);
      } catch (error) {
        console.error("文件消息发送失败:", error);
        // 确保错误时也重置发送状态
        setIsSending(false);
        // 添加错误消息
        setMessages((prev) => [
          ...prev,
          {
            role: 2,
            content: `发送消息失败: ${
              error instanceof Error ? error.message : "未知错误"
            }`,
          },
        ]);
      }
      return;
    }

    // 先添加用户消息到消息列表，确保用户消息立即显示
    const userMessage: ChatMessage = { role: 0, content: message };

    // 如果用户未登录，我们不立即添加消息，而是等待队列回调
    if (!userService.isLoggedIn) {
      console.log("用户未登录，等待队列回调添加消息");
    } else {
      // 用户已登录，立即添加消息
      setMessages([...messages, userMessage]);
    }

    try {
      // 如果是新聊天，发送消息后不再是新聊天模式
      if (isNewChat) {
        setIsNewChat(false);
        console.log("已退出新聊天模式，等待服务器返回会话ID");
      }

      // 使用queuedSendMessage处理纯文本消息
      await queuedSendMessage(
        message,
        selectedModel,
        activeChatId,
        undefined, // 无文件
        // 消息加入队列时的回调（用户未登录时）
        (userMessage, systemMessage) => {
          // 显示用户消息和系统提示
          // 注意：由于我们已经添加了用户消息，这里只需添加系统提示
          console.log("消息已加入队列，显示系统提示");
          setMessages((currentMessages) => {
            // 确保用户消息已添加
            if (
              !currentMessages.some(
                (msg) => msg.role === 0 && msg.content === message
              )
            ) {
              return [...currentMessages, userMessage, systemMessage];
            }
            return [...currentMessages, systemMessage];
          });

          // 显示提示并打开登录模态框
          alertService.warning("请登录后继续会话");
          setTimeout(() => {
            setIsLoginOpen(true);
          }, 300);

          // 消息已加入队列，不再处于发送状态
          setIsSending(false);
        },
        // 消息发送后的回调
        (aiResponse) => {
          // 更新消息列表
          setMessages((currentMessages) => {
            // 确保用户消息已添加
            let updatedMessages = currentMessages;

            // 如果没有用户消息，先添加用户消息
            if (
              !currentMessages.some(
                (msg) => msg.role === 0 && msg.content === message
              )
            ) {
              console.log("添加用户消息:", message);
              updatedMessages = [...currentMessages, userMessage];
            }

            // 如果是第一条AI消息（占位符），添加到消息列表末尾
            if (!updatedMessages.some((msg) => msg.isPlaceholder)) {
              return [...updatedMessages, aiResponse];
            }

            // 否则替换占位符消息
            return updatedMessages.map((msg) =>
              msg.isPlaceholder ? aiResponse : msg
            );
          });

          // 如果收到了sessionId，更新会话ID
          if (aiResponse.sessionId && !aiResponse.isPlaceholder) {
            // 更新活动会话ID
            setActiveChatId(aiResponse.sessionId);

            // 延迟一小段时间后刷新会话列表，确保服务器已经创建了会话
            setTimeout(() => {
              console.log("延迟500ms后刷新会话列表");
              fetchInitialData(aiResponse.sessionId);
            }, 500);
          }

          // 消息发送完成，重置发送状态
          setIsSending(false);
        },
        options // 传递网络搜索等选项
      );
    } catch (error) {
      // 添加错误消息
      setMessages((prev) => [
        ...prev,
        {
          role: 2,
          content: `发送消息失败: ${
            error instanceof Error ? error.message : "未知错误"
          }`,
        },
      ]);

      // 发送失败，重置发送状态
      setIsSending(false);
    }
  };

  // 处理文件消息发送
  const handleFileMessageSend = async (
    message: string,
    files: UploadFile[],
    options?: { isWebSearch?: boolean }
  ) => {
    // 设置消息发送中状态
    setIsSending(true);

    // 处理文件消息
    try {
      // 创建文件消息预览
      const fileMessages = await Promise.all(
        files.map(async (uploadFile) => {
          const file = uploadFile.file;
          // 确保总是创建预览URL，不使用可能被释放的临时URL
          const fileUrl = file.type.startsWith("image/")
            ? URL.createObjectURL(file)
            : "";
          return {
            role: 2,
            content: message.trim() ? message : "图片消息", // 只显示用户输入的描述，不显示文件名
            imageUrl: fileUrl,
          } as ChatMessage;
        })
      );

      // 如果是新聊天，发送消息后不再是新聊天模式
      if (isNewChat) {
        setIsNewChat(false);
      }

      // 用户已登录，直接添加文件消息到消息列表
      const newMessages = [...messages, ...fileMessages];
      setMessages(newMessages);

      // 跟踪处理完成的文件数量
      let completedFiles = 0;
      const totalFiles = files.length;

      // 对每个文件单独调用文件上传API
      for (const uploadFile of files) {
        // 检查文件类型，当前只处理图片文件
        if (uploadFile.file.type.startsWith("image/")) {
          try {
            // 创建AI消息占位符
            const placeholderMessage: ChatMessage = {
              role: 1,
              content: "",
              isPlaceholder: true,
            };

            // 添加占位符到消息列表
            setMessages((prev) => [...prev, placeholderMessage]);

            // 使用 ImageUpload 函数上传单个文件
            const uploadResponse = await ImageUpload(uploadFile.file);

            // 检查上传结果
            if (uploadResponse.code !== 200) {
              throw new Error(uploadResponse.message || "图片上传失败");
            }

            // 获取上传后的文件URL
            const fileUrl = uploadResponse.data?.fileUrl || null;

            // 更新文件上传状态为完成
            setMessages((prev) => {
              return prev.map((msg) => {
                if (msg.role === 0 && msg.content === message && msg.files) {
                  // 找到用户消息，更新文件状态
                  const updatedFiles = msg.files.map((f) => {
                    if (f.id === uploadFile.id) {
                      return {
                        ...f,
                        isUploading: false,
                        uploadProgress: 100,
                        previewUrl: fileUrl || f.previewUrl,
                      };
                    }
                    return f;
                  });
                  return { ...msg, files: updatedFiles };
                }
                return msg;
              });
            });

            // 准备图片消息请求参数
            const fileMessageParams: SendFileMessageRequestType = {
              file: uploadFile.file,
              data: {
                sessionId:
                  activeChatId && !activeChatId.startsWith("chat_")
                    ? activeChatId
                    : undefined,
                model: selectedModel.modelName,
                searchNetwork:
                  options?.isWebSearch !== undefined
                    ? options.isWebSearch
                    : hasFeature(
                        selectedModel.tags,
                        AIModelTagsConstant.NETWORK
                      ),
                enableDeepThink: false, // 默认禁用深度思考
                content: message.trim(),
              },
            };

            // 发送文件消息
            const response = await sendFileMessage(fileMessageParams);

            if (response.code === 200) {
              console.log("图片消息发送成功:", response);

              // 如果这是第一个文件且返回了sessionId，保存它用于后续文件
              if (!activeChatId && response.data?.sessionId) {
                setActiveChatId(response.data.sessionId);
              }

              // 如果是最后一个文件，更新AI回复
              if (completedFiles === totalFiles - 1) {
                const aiResponse: ChatMessage = {
                  role: 1,
                  content: response.data?.content || "已成功处理您的图片",
                  sessionId: response.data?.sessionId,
                  imageUrl: response.data?.imageUrl,
                };

                // 更新消息列表，替换占位符
                setMessages((prev) => {
                  return prev.map((msg) =>
                    msg.isPlaceholder ? aiResponse : msg
                  );
                });

                // 如果返回了sessionId，更新会话列表
                if (response.data?.sessionId) {
                  setTimeout(() => {
                    fetchInitialData(response.data?.sessionId);
                  }, 500);
                }
              }
            } else {
              throw new Error(response.message || "图片消息发送失败");
            }
          } catch (error) {
            console.error("图片上传或发送失败:", error);

            // 更新文件上传状态为失败
            setMessages((prev) => {
              return prev.map((msg) => {
                if (msg.role === 0 && msg.content === message && msg.files) {
                  // 找到用户消息，更新文件状态
                  const updatedFiles = msg.files.map((f) => {
                    if (f.id === uploadFile.id) {
                      return { ...f, isUploading: false, error: true };
                    }
                    return f;
                  });
                  return { ...msg, files: updatedFiles };
                }
                return msg;
              });
            });

            // 如果是最后一个文件或发生错误，更新AI回复为错误消息
            if (completedFiles === totalFiles - 1) {
              const errorMessage: ChatMessage = {
                role: 1,
                content: `处理图片时出错: ${
                  error instanceof Error ? error.message : "未知错误"
                }`,
              };

              // 更新消息列表，替换占位符
              setMessages((prev) => {
                return prev.map((msg) =>
                  msg.isPlaceholder ? errorMessage : msg
                );
              });
            }
          }
        } else {
          console.warn("不支持的文件类型:", uploadFile.file.type);

          // 添加系统消息，提示不支持的文件类型
          setMessages((currentMessages) => [
            ...currentMessages,
            {
              role: 2,
              content: `不支持的文件类型: ${uploadFile.file.type}，当前仅支持图片文件。`,
            },
          ]);
        }

        // 增加已完成文件计数
        completedFiles++;
      }

      // 如果没有文件需要处理，直接重置发送状态
      if (totalFiles === 0) {
        setIsSending(false);
      }
    } catch (error) {
      console.error("文件消息处理失败:", error);
      // 确保错误时也重置发送状态
      setIsSending(false);
      // 添加错误消息
      setMessages((prev) => [
        ...prev,
        {
          role: 2,
          content: `发送消息失败: ${
            error instanceof Error ? error.message : "未知错误"
          }`,
        },
      ]);
    }
  };

  // 添加一个新函数，只负责上传图片并生成Markdown格式，不发送到AI
  const handleUploadImagesOnly = async (
    message: string,
    files: UploadFile[],
    options?: { isWebSearch?: boolean; isDeepThinking?: boolean }
  ) => {
    // 检查最大图片数量限制
    const maxImages = 5; // 与ImageUploader中保持一致
    if (files.length > maxImages) {
      alertService.warning(`一次最多只能上传${maxImages}张图片`);
      // 只处理前maxImages张图片
      files = files.slice(0, maxImages);
    }

    // 创建一个自定义包装函数来处理带选项的消息发送
    const sendWithOptions = async (content: string) => {
      // 确定是否启用网络搜索
      const useSearch =
        options?.isWebSearch !== undefined
          ? options.isWebSearch
          : hasFeature(selectedModel.tags, AIModelTagsConstant.NETWORK);

      console.log(`发送消息，选项: 网络搜索=${useSearch}`);

      // 添加一条系统消息，显示使用的选项
      let optionsText = "";
      if (useSearch) optionsText += "启用网络搜索";

      if (optionsText) {
        setMessages((prev) => [
          ...prev,
          {
            role: 2,
            content: `选项: ${optionsText}`,
          },
        ]);
      }

      // 使用标准参数调用queuedSendMessage
      try {
        return await queuedSendMessage(
          content,
          selectedModel,
          activeChatId,
          undefined, // 无文件
          undefined, // 队列回调
          // 消息发送回调
          (aiResponse) => {
            // 更新消息列表，替换占位符
            setMessages((prev) => {
              return prev.map((msg) => (msg.isPlaceholder ? aiResponse : msg));
            });

            // 如果收到了sessionId，更新会话ID
            if (aiResponse.sessionId && !aiResponse.isPlaceholder) {
              console.log("收到服务器返回的会话ID:", aiResponse.sessionId);
              setActiveChatId(aiResponse.sessionId);

              // 延迟一小段时间后刷新会话列表
              setTimeout(() => {
                fetchInitialData(aiResponse.sessionId);
              }, 500);
            }
          },
          // 传递网络搜索选项
          {
            isWebSearch: useSearch,
          }
        );
      } catch (error) {
        console.error("发送Markdown消息失败:", error);

        // 添加错误消息到UI
        setMessages((prev) => [
          ...prev,
          {
            role: 2,
            content: `发送消息失败: ${
              error instanceof Error ? error.message : "未知错误"
            }`,
          },
        ]);

        // 确保UI不再显示loading状态
        setIsSending(false);

        // 重新抛出错误，让外层catch捕获
        throw error;
      }
    };

    // 设置消息发送中状态
    setIsSending(true);

    try {
      // 创建用户消息
      const userMessage: ChatMessage = {
        role: 0,
        content: message,
        files: files.map((file) => ({
          id: file.id,
          name: file.file.name,
          previewUrl: file.previewUrl,
          isUploading: true, // 标记文件正在上传
          uploadProgress: 0,
        })),
      };

      // 添加用户消息到消息列表
      setMessages((prev) => [...prev, userMessage]);

      // 如果是新聊天，发送消息后不再是新聊天模式
      if (isNewChat) {
        setIsNewChat(false);
      }

      // 收集成功上传的图片响应
      const successfulUploads: ImageUploadResponse[] = [];

      // 依次上传每个文件
      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        try {
          // 更新文件上传状态为进行中
          setMessages((prev) => {
            return prev.map((msg) => {
              if (msg.role === 0 && msg.content === message && msg.files) {
                const updatedFiles = msg.files.map((f) => {
                  if (f.id === file.id) {
                    return { ...f, uploadProgress: 10 };
                  }
                  return f;
                });
                return { ...msg, files: updatedFiles };
              }
              return msg;
            });
          });

          // 上传文件
          console.log("开始上传图片:", file.file.name);
          const uploadResponse = await ImageUpload(file.file);

          // 检查上传结果
          if (uploadResponse.code !== 200) {
            console.error(
              `图片上传失败: 状态码 ${uploadResponse.code}, 消息: ${uploadResponse.message}`
            );
            throw new Error(uploadResponse.message || "图片上传失败");
          }

          console.log("图片上传成功:", uploadResponse.data);

          // 将成功上传的图片响应添加到收集数组
          if (uploadResponse.data) {
            successfulUploads.push(uploadResponse.data);
          }

          // 获取上传后的文件URL
          const fileUrl = uploadResponse.data?.fileUrl || null;

          // 更新文件上传状态为完成
          setMessages((prev) => {
            return prev.map((msg) => {
              if (msg.role === 0 && msg.content === message && msg.files) {
                const updatedFiles = msg.files.map((f) => {
                  if (f.id === file.id) {
                    return {
                      ...f,
                      isUploading: false,
                      error: false,
                      uploadProgress: 100,
                      previewUrl: fileUrl || f.previewUrl,
                    };
                  }
                  return f;
                });
                return { ...msg, files: updatedFiles };
              }
              return msg;
            });
          });

          // 如果是最后一个文件
          if (i === files.length - 1) {
            // 如果有成功上传的图片，生成自定义Markdown格式并显示
            if (successfulUploads.length > 0) {
              const imageMarkdown = generateCustomImageMarkdown(
                successfulUploads,
                message.trim()
              );

              // 创建AI消息占位符
              const placeholderMessage: ChatMessage = {
                role: 1,
                content: "",
                isPlaceholder: true,
              };

              // 添加占位符到消息列表
              setMessages((prev) => [...prev, placeholderMessage]);

              // 使用sendWithOptions发送Markdown内容
              sendWithOptions(imageMarkdown);
            }
          }
        } catch (error) {
          // 如果上传失败，直接返回错误消息
          setMessages((prev) => [
            ...prev,
            {
              role: 2,
              content: `上传图片失败: ${
                error instanceof Error ? error.message : "未知错误"
              }`,
            },
          ]);
          // 更新文件上传状态为失败
          setMessages((prev) => {
            return prev.map((msg) => {
              if (msg.role === 0 && msg.content === message && msg.files) {
                const updatedFiles = msg.files.map((f) => {
                  if (f.id === file.id) {
                    return { ...f, isUploading: false, error: true };
                  }
                  return f;
                });
                return { ...msg, files: updatedFiles };
              }
              return msg;
            });
          });
        }
      }
    } catch (error) {
      // 添加错误消息
      setMessages((prev) => [
        ...prev,
        {
          role: 2,
          content: `上传图片失败: ${
            error instanceof Error ? error.message : "未知错误"
          }`,
        },
      ]);
    } finally {
      // 无论成功还是失败，都重置发送状态
      setIsSending(false);
    }
  };

  // 修改处理文件上传的函数，添加对多文件的支持
  const handleFileUpload = async (file: File | File[]) => {
    // 确保我们可以处理单个文件或多个文件
    const files = Array.isArray(file) ? file : [file];

    // 检查最大图片数量限制
    const maxImages = 5; // 与ImageUploader中保持一致
    if (files.length > maxImages) {
      alertService.warning(`一次最多只能上传${maxImages}张图片`);
      // 只处理前maxImages张图片
      files.splice(maxImages);
    }

    // 处理所有文件
    const uploadFiles = files.map((file) => ({
      id: `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      file,
      previewUrl: file.type.startsWith("image/")
        ? URL.createObjectURL(file)
        : undefined,
    }));

    // 保留当前的网络搜索设置
    const inputArea = document.querySelector(".flex.items-center.px-2");
    const isWebSearchActive =
      inputArea
        ?.querySelector(".bg-blue-100, .dark\\:bg-blue-900\\/30")
        ?.textContent?.includes("联网搜索") || false;

    console.log("图片上传设置：网络搜索=", isWebSearchActive);

    // 使用仅上传图片功能发送所有文件
    handleUploadImagesOnly("", uploadFiles, {
      isWebSearch: isWebSearchActive,
    });
  };

  /**
   * 创建新对话 - 简化版本，不再创建本地会话记录
   */
  const handleNewChat = async () => {
    console.log("创建新对话，进入新聊天模式");

    // 如果AI正在响应，禁止创建新会话
    if (queuedIsLoading || queuedIsStreaming) {
      alertService.warning("AI正在生成回复，请等待完成后再创建新会话");
      return;
    }

    // 清空消息和当前会话ID
    setMessages([]);
    setActiveChatId(null);

    // 设置为新聊天模式
    setIsNewChat(true);

    // 不再重置发送状态，避免界面闪烁
    // setIsSending(false);

    console.log("已设置isNewChat=true，等待用户发送第一条消息");

    // 关闭侧边栏(移动端)
    closeSidebar();

    // 确保UI立即更新以显示空白的新聊天界面
    setTimeout(() => {
      // 确保输入框获得焦点
      if (inputAreaRef.current) {
        const textareaRef = inputAreaRef.current.getTextareaRef();
        if (textareaRef && textareaRef.current) {
          textareaRef.current.focus();
        }
      }
    }, 100);
  };

  // 修改useEffect函数，使用queuedIsStreaming替代isStreaming
  useEffect(() => {
    // 仅在流式响应过程中更新
    if (queuedIsStreaming && messages.length > 0) {
      console.log("useEffect检测到流内容变化，queuedIsStreaming=true");
      // 不再需要updateStreamingMessage，此处直接使用setMessages更新
    }
  }, [queuedIsStreaming, messages]);

  // 处理登录逻辑
  const handleLogin = (email: string, code: string) => {
    // 假设这里有登录请求逻辑
    console.log("Login with:", email, code);
    // 登录成功后的处理
    handleLoginSuccess();
  };

  // 处理登录成功后的操作
  const handleLoginSuccess = () => {
    // 登录成功后隐藏登录界面
    setIsLoginOpen(false);

    // 显示登录成功提示
    alertService.success("登录成功");

    console.log("[App] 登录成功，准备处理缓存的请求");

    // 首先只获取模型信息
    getAiModel()
      .then((response) => {
        if (
          response.code === 200 &&
          Array.isArray(response.data) &&
          response.data.length > 0
        ) {
          const enabledModels = response.data.filter(
            (model: AiModelResponse) => model.enabled
          );
          if (enabledModels.length > 0) {
            console.log("[App] 获取到的AI模型数量:", enabledModels.length);

            // 设置全局默认模型，供队列处理使用
            window._defaultModelInfo = enabledModels[0];
            console.log(
              "[App] 已设置全局默认模型:",
              window._defaultModelInfo.modelName,
              window._defaultModelInfo.accessCode
            );

            // 更新状态
            setAiModels(enabledModels);

            // 如果当前选择的是默认模型，更新为第一个有效模型
            if (selectedModel === DEFAULT_MODEL) {
              console.log(
                "[App] 更新当前选定模型:",
                enabledModels[0].modelName
              );
              setSelectedModel(enabledModels[0]);
            }
          }
        }

        // 获取模型后再处理队列
        console.log("[App] 模型数据加载完成，开始处理请求队列");
        // 延迟足够的时间确保状态更新完成
        setTimeout(() => {
          console.log(
            "[App] 调用请求队列处理，当前默认模型:",
            window._defaultModelInfo?.accessCode || "未设置"
          );
          requestQueue.processQueue();
        }, 300);

        // 继续获取其他数据
        fetchInitialData();
      })
      .catch((error) => {
        console.error("[App] 获取模型数据失败，但仍尝试处理队列:", error);
        requestQueue.processQueue();

        // 继续获取其他数据
        fetchInitialData();
      });
  };

  // 定义获取初始数据的函数
  const fetchInitialData = async (newSessionId?: string) => {
    console.log(
      "[App] 正在获取初始数据，当前登录状态:",
      userService.isLoggedIn,
      newSessionId ? `，新会话ID: ${newSessionId}` : ""
    );

    if (!userService.isLoggedIn) {
      console.log("[App] 用户未登录，跳过数据获取");
      return;
    }

    try {
      // 获取会话历史（模型信息已在handleLoginSuccess中获取）
      const sessionHistoryResponse = await getSessionHistoryList();

      // 处理会话历史数据
      if (sessionHistoryResponse.code === 200) {
        const sessions = sessionHistoryResponse.data.records;

        // 确保会话按更新时间排序，最新的在前面
        const sortedSessions = [...sessions].sort((a, b) => {
          try {
            const dateA = new Date(a.updateTime).getTime();
            const dateB = new Date(b.updateTime).getTime();
            return dateB - dateA; // 降序排列，最新的在前
          } catch {
            return 0;
          }
        });

        setSessionHistoryItem(sortedSessions);
        console.log("[App] 会话历史数据已更新, 数量:", sortedSessions.length);

        // 如果提供了新会话ID，确保它被选中
        if (newSessionId) {
          const newSession = sortedSessions.find(
            (session) => session.id === newSessionId
          );
          if (newSession) {
            console.log("[App] 选中新创建的会话:", newSessionId);
            setActiveChatId(newSessionId);

            // 获取新会话的消息历史
            try {
              const sessionDetails = await getSessionDetails(newSessionId);
              if (sessionDetails.code === 200) {
                setMessages(sessionDetails.data);
                console.log("[App] 已加载新会话的消息历史");
              }
            } catch (error) {
              console.error("[App] 获取新会话详情失败:", error);
            }
          } else {
            console.warn("[App] 未在返回的会话列表中找到新会话:", newSessionId);

            // 如果在列表中找不到新会话，可能是API延迟，尝试再次获取
            setTimeout(() => {
              console.log("[App] 延迟1秒后再次尝试获取会话列表");
              fetchInitialData(newSessionId);
            }, 1000);
          }
        }
        // 否则，如果有会话历史但当前没有活动聊天，选择第一个会话
        else if (sortedSessions.length > 0 && !activeChatId) {
          console.log("[App] 自动选择第一个会话:", sortedSessions[0].id);
          handleSelectChat(sortedSessions[0].id);
        }
      } else {
        console.error(
          "[App] 获取会话历史失败:",
          sessionHistoryResponse.message
        );
      }
    } catch (error) {
      console.error("[App] 获取初始数据失败:", error);
    }
  };

  // 处理登出成功后的操作
  const handleLogoutSuccess = () => {
    // 清除会话数据
    setSessionHistoryItem([]);

    // 清除当前聊天状态
    setActiveChatId(null);
    setMessages([]);
    setIsNewChat(false);
    setIsSending(false);

    // 重置模型列表为默认模型
    setAiModels([DEFAULT_MODEL]);
    setSelectedModel(DEFAULT_MODEL);
  };

  // 订阅userService的登录状态变化
  useEffect(() => {
    // 监听登录状态变化
    const unsubscribe = userService.subscribe(() => {
      console.log(
        "[App] 检测到用户状态变化，当前登录状态:",
        userService.isLoggedIn
      );

      if (userService.isLoggedIn) {
        // 如果用户登录，获取所需数据
        fetchInitialData();
      } else {
        // 如果用户已登出，执行清理操作
        handleLogoutSuccess();
      }
    });

    // 组件卸载时取消订阅
    return unsubscribe;
  }, []);

  // 监听401/403请求错误，自动打开登录模态框
  useEffect(() => {
    // 注册打开登录模态框的事件监听
    const unsubscribe = requestEvents.on("openLogin", () => {
      setIsLoginOpen(true);
    });

    // 组件卸载时取消事件监听
    return unsubscribe;
  }, []);

  // 添加全局键盘快捷键处理
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Alt + 左方向键：切换到上一个会话
      if (e.altKey && e.key === "ArrowLeft") {
        e.preventDefault();
        switchToPreviousChat();
      }
      // Alt + 右方向键：切换到下一个会话
      else if (e.altKey && e.key === "ArrowRight") {
        e.preventDefault();
        switchToNextChat();
      }
    };

    // 添加事件监听
    document.addEventListener("keydown", handleKeyDown);

    // 组件卸载时移除事件监听
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [activeChatId, sessionHistoryItem]); // 依赖项更新时重新创建事件处理函数

  // 增强复制功能 - 支持复制文本和图片
  const handleCopyContent = () => {
    // 如果有选中文本或图片，执行复制
    if (selectedText || selectedImage) {
      copyText();
      if (selectedText) {
        alertService.success("已复制选中内容");
      } else if (selectedImage) {
        alertService.success("已复制图片");
        // 立即更新剪贴板状态，使粘贴按钮可用
        setHasClipboardContent(true);
      }
    }
    closeContextMenu();
  };

  // 增强粘贴功能 - 支持粘贴文本和图片
  const handlePaste = async () => {
    try {
      // 获取剪贴板内容，使用类型断言来满足TypeScript类型检查
      const clipboardContent = (await pasteText()) as ClipboardContent;

      // 处理图片粘贴
      if (clipboardContent.type === "image") {
        // 从剪贴板URL或Blob创建File对象
        let imageFile: File | null = null;

        if (clipboardContent.blob) {
          // 如果有Blob对象，直接使用
          imageFile = new File(
            [clipboardContent.blob],
            `clipboard_image_${Date.now()}.png`,
            { type: clipboardContent.blob.type }
          );
        } else if (typeof clipboardContent.data === "string") {
          // 如果只有URL，需要先获取图片数据
          try {
            const response = await fetch(clipboardContent.data);
            const blob = await response.blob();
            imageFile = new File([blob], `clipboard_image_${Date.now()}.png`, {
              type: blob.type || "image/png",
            });
          } catch (error) {
            console.error("无法从URL创建图片文件:", error);
            alertService.error("处理图片失败");
            closeContextMenu();
            return;
          }
        }

        if (imageFile) {
          // 创建上传文件对象
          const uploadFile: UploadFile = {
            id: `file_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
            file: imageFile,
            previewUrl: URL.createObjectURL(imageFile),
          };

          // 如果inputAreaRef可用，将图片添加到输入区域而不是直接上传
          if (
            inputAreaRef.current &&
            typeof inputAreaRef.current.addImageToUploader === "function"
          ) {
            try {
              // 使用InputArea内置的重复检查
              inputAreaRef.current.addImageToUploader(uploadFile);
              alertService.success("图片已添加到输入区域，您可以继续添加文字");
            } catch (error) {
              console.error("处理粘贴图片时出错:", error);
              alertService.error("添加图片失败");
            }
          } else {
            // 如果无法直接添加到输入区，回退到原有的上传方法
            handleFileUpload(imageFile);
            alertService.success("图片已添加到上传区");
          }
        } else {
          alertService.error("无法处理剪贴板中的图片");
        }
      }
      // 处理文本粘贴
      else if (
        clipboardContent.type === "text" &&
        typeof clipboardContent.data === "string"
      ) {
        // 文本直接设置到输入框
        if (inputAreaRef.current) {
          inputAreaRef.current.setInputText(clipboardContent.data);
          alertService.success("已粘贴到输入框");
        }
      }
    } catch (error) {
      console.error("粘贴操作失败:", error);
      alertService.error("粘贴失败");
    }

    closeContextMenu();
  };

  // 添加切换到上一个会话的函数
  const switchToPreviousChat = () => {
    if (!activeChatId || sessionHistoryItem.length <= 1) {
      alertService.info("没有上一个会话");
      return;
    }

    // 找到当前会话在列表中的位置
    const currentIndex = sessionHistoryItem.findIndex(
      (chat) => chat.id === activeChatId
    );
    if (currentIndex <= 0) {
      alertService.info("已经是第一个会话");
      return;
    }

    // 切换到上一个会话
    const previousChat = sessionHistoryItem[currentIndex - 1];
    handleSelectChat(previousChat.id);
    alertService.success(`已切换到: ${previousChat.sessionName}`);
    closeContextMenu();
  };

  // 添加切换到下一个会话的函数
  const switchToNextChat = () => {
    if (!activeChatId || sessionHistoryItem.length <= 1) {
      alertService.info("没有下一个会话");
      return;
    }

    // 找到当前会话在列表中的位置
    const currentIndex = sessionHistoryItem.findIndex(
      (chat) => chat.id === activeChatId
    );
    if (currentIndex === -1 || currentIndex >= sessionHistoryItem.length - 1) {
      alertService.info("已经是最后一个会话");
      return;
    }

    // 切换到下一个会话
    const nextChat = sessionHistoryItem[currentIndex + 1];
    handleSelectChat(nextChat.id);
    alertService.success(`已切换到: ${nextChat.sessionName}`);
    closeContextMenu();
  };
  return (
    <div className="flex flex-col h-screen w-screen max-w-full bg-gray-50 dark:bg-gray-900 overflow-hidden">
      {/* 使用Header组件 */}
      <Header
        onToggleSidebar={toggleSidebar}
        isSidebarOpen={isSidebarOpen}
        onNewChat={handleNewChat}
        onLogin={() => {
          console.log("用户点击了登录按钮");
          setIsLoginOpen(true); // 打开登录模态框
        }}
      />

      {/* 主体内容 */}
      <div
        className={`flex flex-1 overflow-hidden w-full ${
          isPcSidebarCollapsed ? "sidebar-collapsed" : "sidebar-expanded"
        }`}
      >
        {/* 使用Sidebar组件 */}
        <Sidebar
          sessionHistoryItem={sessionHistoryItem}
          chatHistory={[]} // 传递空数组，不再使用本地会话列表
          onSelectChat={handleSelectChat}
          activeChat={activeChatId}
          onRenameChat={handleRenameChat}
          onDeleteChat={handleDeleteChat}
          isOpen={isSidebarOpen}
          onClose={closeSidebar}
          onNewChat={handleNewChat}
          isResponding={queuedIsLoading || queuedIsStreaming}
          onPcSidebarToggle={handlePcSidebarToggle}
        />
        {/* 内容区域 - 修改为紧贴侧边栏，添加过渡效果以适应侧边栏折叠 */}
        <div
          className="flex-1 overflow-hidden content-transition"
          style={{
            width: "100%",
            marginLeft: isPcSidebarCollapsed ? "12px" : "0",
          }}
        >
          <ChatArea
            messages={messages}
            isLoading={queuedIsLoading || isSending}
            isStreaming={queuedIsStreaming}
            onSendMessage={handleSendMessage}
            onSendWithFiles={handleUploadImagesOnly}
            onFileUpload={handleFileUpload}
            onNewChat={handleNewChat}
            hasActiveChat={true}
            models={aiModels}
            selectedModel={selectedModel}
            onModelChange={handleModelChange}
            inputAreaRef={inputAreaRef}
            setInputText={setInputText}
          />
        </div>
      </div>

      {/* 登录模态框 */}
      <Login
        isOpen={isLoginOpen}
        onClose={() => {
          setTimeout(() => {
            setIsLoginOpen(false);
          }, 100);
        }}
        onLogin={handleLogin}
      />

      {/* 全局右键菜单 */}
      <ContextMenu
        open={contextMenuOpen}
        onClose={closeContextMenu}
        positionX={positionX}
        positionY={positionY}
        items={[
          // 复制选项 - 根据选中内容类型显示不同文本
          {
            id: "copy",
            label: selectedImage ? "复制图片" : "复制",
            icon: selectedImage ? (
              <ImageIcon fontSize="small" />
            ) : (
              <ContentCopyIcon fontSize="small" />
            ),
            onClick: handleCopyContent,
            disabled: !selectedText && !selectedImage, // 只在有选中内容时启用
            divider: false,
          },
          {
            id: "paste",
            label: "粘贴",
            icon: <ContentPasteIcon fontSize="small" />,
            onClick: handlePaste,
            disabled: !hasClipboardContent, // 根据剪贴板状态决定是否可用
            color: "inherit", // 使用继承的颜色，不使用高亮
            divider: true,
          },
          // 添加切换会话功能
          {
            id: "previous-chat",
            label: "上一个会话",
            icon: <ArrowBackIcon fontSize="small" />,
            onClick: switchToPreviousChat,
            disabled:
              !activeChatId ||
              sessionHistoryItem.findIndex(
                (chat) => chat.id === activeChatId
              ) <= 0,
          },
          {
            id: "next-chat",
            label: "下一个会话",
            icon: <ArrowForwardIcon fontSize="small" />,
            onClick: switchToNextChat,
            disabled:
              !activeChatId ||
              sessionHistoryItem.findIndex(
                (chat) => chat.id === activeChatId
              ) === -1 ||
              sessionHistoryItem.findIndex(
                (chat) => chat.id === activeChatId
              ) >=
                sessionHistoryItem.length - 1,
            divider: true,
          },
        ]}
      />

      {/* 添加全局CSS样式 */}
      <style>{`
        .content-transition {
          transition: margin-left 350ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .sidebar-collapsed .content-transition {
          margin-left: 12px;
        }
        
        .sidebar-expanded .content-transition {
          margin-left: 0;
        }
      `}</style>
    </div>
  );
}
export default App;
